<template>
	<div id="shezhi" v-show="showSettingState">
		
		<div class="header" @click="change">
			<span>	设置</span>
		</div>
		
		<section>
			<div v-show="!status">
				<div class="zxinxi">
					<span class="zzhanghao">
						694944<br />
						<span class="zqian">
							微信登录:
						</span>
					</span>
					<img src="../../assets/img/jiantouyou.png"/>
				</div>
				<div class="zxinxi2">
					<ul>
						<li>账号管理</li>
						<li>密码</li>
						<li>收货地址</li>
					</ul>
				</div>
				<div class="zxinxi3">
					<ul>
						<li>好友</li>
						<li>通知</li>
					</ul>
				</div>
			</div>
			
			<div>
				<div class="zxinxi2">
					<ul>
						<li>联系我们</li>
						<li>意见反馈</li>
						<li>帮助中心</li>
					</ul>
				</div>
				<div class="zxinxi2">
					<ul>
						<li>把下厨房告诉朋友</li>
						<li>帮助下厨房评分</li>
						<li>清除缓存</li>
					</ul>
				</div>
			</div>
			
			<div class="zxinxi4" @click="loginout" v-show="!status">
				退出当前账号
			</div>
		</section>
		
	</div>
</template>

<script>
	export default {
		computed: {
			showSettingState(){
				// 获取仓库当中的状态值
				//this.$store.state.bigState = true;
				return this.$store.state.settingState;
			},
			status(){
				return this.$store.state.status;
			}
		},
		methods:{
			change(){
				this.$store.commit('changeSettingState');
			},
			loginout(){
				if(localStorage.userInfo){
					localStorage.removeItem('userInfo');
					this.$store.commit('changeSettingState');
					this.$store.commit('changeState',true);
				}
			}
		}
	}
</script>

<style>
	
	#shezhi{
		position: relative;
		width: 100%;
		height: 100%;
		background: white;
	}
	.header{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		z-index: 99;
		height: 1.634615rem;
		color: black;
		font-size: 0.355769rem;
		line-height: 1.682692rem;
		text-align: center;
		background: url(../../assets/img/jiantouzuo.png) no-repeat 0.721153rem 0.528846rem;
		background-size:0.317307rem 0.586538rem ;
		border-bottom: 0.423076rem solid #fafaf8;
	}
	header span{
		position: absolute;
	}
    section{width: 100%;
    position: absolute;
    top: 1.682692rem;
    
    overflow-y: scroll;
    bottom: 0;
	}
	section .zxinxi{
		height: 2.01923rem;
		width: 100%;
		background: url(../../assets/img/touxiang.png) no-repeat 0.490384rem 0.721153rem;
        background-size: 0.932692rem 0.759615rem;
        border-bottom: 0.423076rem solid #fafaf8;
	}
	section .zzhanghao{
		position: relative;
		top: 0.721153rem;
		left: 2.192307rem;
	}
	section .zqian{
		color: #c1c1bd;
		position: absolute;
		top: 0.365384rem;
		white-space: nowrap;
	}
	section .zxinxi img{
		width: 0.288461rem;
		height: 0.567307rem;
		position: absolute;
		top: 0.721153rem;
		right: 0.336538rem;
		
	}
	section .zxinxi2{
		height: 4.326923rem;
		width: 100%;
        border-bottom: 0.423076rem solid #fafaf8;
        vertical-align: auto;
        font-size: 0.365384rem;
	}
	section .zxinxi2 li{
		height: 1.442307rem;
		line-height: 1.442307rem;
		padding-left: 0.596153rem;
	}
	section .zxinxi3{
		height: 2.884615rem;
		width: 100%;
        border-bottom: 0.423076rem solid #fafaf8;
        vertical-align: auto;
        font-size: 0.365384rem;
	}
	section .zxinxi3 li{
		height: 1.442307rem;
		line-height: 1.442307rem;
		padding-left: 0.596153rem;
	}
	section .zxinxi4{
		height: 1.442307rem;
		width: 100%;
       
        color: red;
        text-align: center;
        line-height: 1.442307rem;
        font-size: 0.365384rem;
	}
</style>